<template>
  <div class="song-lyric">
    <h1 class="lyric-title">歌词</h1>
    <!--有个词-->
    <ul class="has-lyric" v-if="lyr.length" :key="index">
      <li v-for="(item,index) in lyr" v-bind:key="index">
        {{item[1]}}
      </li>
    </ul>
    <!--没有歌词-->
    <div v-else class="no-lyric" :key="no-lyric">
      <span>暂无歌词</span>
    </div>
  </div>
</template>

<script>
  import {mixin} from '../mixins'
  import {mapGetters} from 'vuex'

  export default {
    name: 'lyric',
    mixins: [mixin],
    data () {
      return {
        lyr: []        //当前歌曲的歌词
      }
    },
    computed: {
      ...mapGetters([
        'curTime',    //当前播放到的位置
        'id',         //当前播放的歌曲id
        'lyric',      //歌词
        'listIndex',   //当前歌曲在歌单中的位置
        'listOfSongs'   //当歌单列表
      ])
    },
    created () {
      this.lyr = this.lyric
    },
    watch: {
      id: function () {
        this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)
      },
      curTime: function () {
        if (this.lyr.length > 0) {
          for (let i = 0; i < this.lyr.length; i++) {
            if (this.curTime >= this.lyr[i][0]) {
              for (let j = 0; j < this.lyr.length; j++) {
                document.querySelectorAll('.has-lyric li')[j].style.color = '#000'
                document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px'
              }
              if (i>=0){
                document.querySelectorAll('.has-lyric li')[i].style.color = '#95d2f6'
                document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px'
              }
            }
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/lyric.scss";
</style>
